<template>
    <!-- 帖子内容列表 -->
    <view class="post-list">
        <!-- 加载状态 -->
        <view v-if="isLoading" class="loading">
            <text>加载中...</text>
        </view>

        <view class="grid-container">
            <view
                v-for="item in content"
                :key="item.postId"
                class="post-item"
                @click="navigateToViewPost(item.postId)"
            >
                <!-- 帖子封面 -->
                <image
                    class="post-image"
                    :src="item.imageUrls[0]"
                    mode="aspectFill"
                />
                <!-- 帖子信息 -->
                <view class="post-info">
                    <text class="info-title">{{ item.title }}</text>

                    <view class="info-user">
                        <image
                            class="info-avatar"
                            :src="item.user.avatarUrl"
                        ></image>
                        <view class="info-username">{{
                            item.user.username
                        }}</view>

                        <view class="info-likes">
                            <han-icon name="likes" />
                            {{ item.likeCount || 0 }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    content: {
        type: Array,
        default: () => []
    },
    isLoading: Boolean,
    hasMore: Boolean
});

const navigateToViewPost = (postId) => {
    uni.navigateTo({
        url: `/pages/post/subpages/view_post/postView?postId=${postId}`
    });
};
</script>

<style lang="scss" scoped>
.post-list {
    .loading {
        width: 100%;
        text-align: center;
        margin: 20rpx auto;
        font-size: $han-font-size-lg;
        color: $han-global-secondary-font-color;
    }

    .grid-container {
        /* 改为多列布局 */
        column-count: 2;
        column-gap: 20rpx;
        padding-bottom: 110rpx;

        .post-item {
            border-radius: $han-border-radius-md;
            border: 1rpx solid $han-global-border-color;
            overflow: hidden;
            break-inside: avoid; /* 防止内容分列 */
            margin-bottom: 20rpx;
            transition: transform 0.3s;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
            }

            .post-image {
                width: 100%;
                height: 400rpx;
                object-fit: cover;
            }

            .post-info {
                padding: 0 15rpx 10rpx;

                .info-title {
                    font-size: $han-font-size-base;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2; /* 显示2行 */
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: normal;
                    line-height: $han-line-height-title;
                }

                .info-user {
                    margin-top: 10rpx;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    font-size: $han-font-size-xs - 4rpx;
                    color: $han-global-secondary-font-color;

                    .info-avatar {
                        flex: 1;
                        max-width: 45rpx;
                        max-height: 45rpx;
                        border-radius: 50%;
                    }

                    .info-username {
                        flex: 3;
                        margin-left: 5rpx;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 150rpx;
                    }

                    .info-likes {
                        flex: 1;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                    }
                }
            }
        }
    }
}
</style>
